// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <a class="link" :href="uri" rel="noopener noreferrer" target="_blank">
        {{ label }}
        <svg class="link__icon" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3333 5.33333C11.1565 5.33333 10.987 5.40357 10.8619 5.5286C10.7369 5.65362 10.6667 5.82319 10.6667 6V10C10.6667 10.1768 10.5964 10.3464 10.4714 10.4714C10.3464 10.5964 10.1768 10.6667 10 10.6667H2C1.82319 10.6667 1.65362 10.5964 1.5286 10.4714C1.40357 10.3464 1.33333 10.1768 1.33333 10V2C1.33333 1.82319 1.40357 1.65362 1.5286 1.5286C1.65362 1.40357 1.82319 1.33333 2 1.33333H6C6.17681 1.33333 6.34638 1.2631 6.4714 1.13807C6.59643 1.01305 6.66667 0.843478 6.66667 0.666667C6.66667 0.489856 6.59643 0.320286 6.4714 0.195262C6.34638 0.0702379 6.17681 0 6 0H2C1.46957 0 0.960859 0.210714 0.585787 0.585787C0.210714 0.960859 0 1.46957 0 2V10C0 10.5304 0.210714 11.0391 0.585787 11.4142C0.960859 11.7893 1.46957 12 2 12H10C10.5304 12 11.0391 11.7893 11.4142 11.4142C11.7893 11.0391 12 10.5304 12 10V6C12 5.82319 11.9298 5.65362 11.8047 5.5286C11.6797 5.40357 11.5101 5.33333 11.3333 5.33333Z" fill="#0059D0" />
            <path d="M8.66923 1.33333H9.72256L5.52923 5.52C5.46674 5.58198 5.41715 5.65571 5.3833 5.73695C5.34946 5.81819 5.33203 5.90533 5.33203 5.99333C5.33203 6.08134 5.34946 6.16848 5.3833 6.24972C5.41715 6.33096 5.46674 6.40469 5.52923 6.46667C5.59121 6.52915 5.66494 6.57875 5.74618 6.61259C5.82742 6.64644 5.91456 6.66387 6.00256 6.66387C6.09057 6.66387 6.17771 6.64644 6.25895 6.61259C6.34019 6.57875 6.41392 6.52915 6.4759 6.46667L10.6692 2.28V3.33333C10.6692 3.51014 10.7395 3.67971 10.8645 3.80474C10.9895 3.92976 11.1591 4 11.3359 4C11.5127 4 11.6823 3.92976 11.8073 3.80474C11.9323 3.67971 12.0026 3.51014 12.0026 3.33333V0.666667C12.0026 0.489856 11.9323 0.320286 11.8073 0.195262C11.6823 0.0702379 11.5127 0 11.3359 0H8.66923C8.49242 0 8.32285 0.0702379 8.19783 0.195262C8.0728 0.320286 8.00256 0.489856 8.00256 0.666667C8.00256 0.843478 8.0728 1.01305 8.19783 1.13807C8.32285 1.2631 8.49242 1.33333 8.66923 1.33333Z" fill="#0059D0" />
        </svg>
    </a>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

// @vue/component
@Component
export default class VLink extends Vue {
    @Prop({ default: '' })
    public readonly uri: string;
    @Prop({ default: '' })
    public readonly label: string;
}
</script>

<style lang="scss">
    .link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-family: 'font_semiBold', sans-serif;
        color: var(--c-primary);
        font-size: 16px;
        text-decoration: none;

        &__icon {
            margin-left: 12px;
        }
    }
</style>
